<template>
  <div class="EpidemicDynamic">
    <!-- 疫情动态数据展示 -->
    <div class="epidemicDyn">
      <!-- 当前时间 -->
      <div class="nowTime">截至到：{{ new Date() | fmtDate }}</div>
      <!-- 第一个部分 -->
      <div class="first">
        <!-- 盒子 -->
        <div class="box">
          <div class="num" v-if="ncovData[0]">
            {{ ncovData[0].desc.currentConfirmedIncr }}
          </div>
          <div class="title">新增确诊</div>
        </div>
        <div class="box">
          <div class="num" v-if="ncovData[0]">
            {{ ncovData[0].desc.curedIncr }}
          </div>
          <div class="title">新增治愈</div>
        </div>
        <div class="box">
          <div class="num" v-if="ncovData[0]">
            {{ ncovData[0].desc.deadIncr }}
          </div>
          <div class="title">新增死亡</div>
        </div>
      </div>
      <!-- 当前时间 -->
      <div class="nowTime">截至到：{{ new Date() | fmtDate }}</div>
      <!-- 第二个部分 -->
      <div class="second">
        <div class="box">
          <div class="num orange" v-if="ncovData[0]">
            {{ ncovData[0].desc.currentConfirmedCount }}
          </div>
          <div class="title">现存确诊</div>
        </div>
        <div class="box">
          <div class="num green" v-if="ncovData[0]">
            {{ ncovData[0].desc.seriousCount }}
          </div>
          <div class="title">现有无症状</div>
        </div>
        <div class="box">
          <div class="num brown" v-if="ncovData[0]">
            {{ ncovData[0].desc.suspectedCount }}
          </div>
          <div class="title">累计境外输入</div>
        </div>
        <div class="box">
          <div class="num orange" v-if="ncovData[0]">
            {{ ncovData[0].desc.confirmedCount }}
          </div>
          <div class="title">累计确诊</div>
        </div>
        <div class="box">
          <div class="num red" v-if="ncovData[0]">
            {{ ncovData[0].desc.curedCount }}
          </div>
          <div class="title">累计治愈</div>
        </div>
        <div class="box">
          <div class="num blue" v-if="ncovData[0]">
            {{ ncovData[0].desc.deadCount }}
          </div>
          <div class="title">累计死亡</div>
        </div>
      </div>
    </div>
    <!-- 国内疫情数据 -->
    <div class="inLandCovid">
      <!-- 标题 -->
      <div class="nowTime">国内病例</div>
      <!-- 表格展示区 -->
      <div class="tableContent">
        <!-- 表格的数据源 :data="tableData" -->
        <el-table :data="inLandCovidData" border style="width: 100%" :header-cell-style="changeColor">
          <!-- prop="date" 根据返回的数据 将要显示的字段 -->
          <!-- label="新增确诊" -->
          <!-- 地区 -->
          <el-table-column prop="province" label="地区" align="center">
          </el-table-column>
          <!-- 新增确诊 -->
          <el-table-column prop="confirmed" label="新增确诊" align="center">
          </el-table-column>
          <!-- 新增疑似 -->
          <el-table-column prop="suspected" label="新增疑似" align="center">
          </el-table-column>
          <!-- 新增死亡 -->
          <el-table-column prop="dead" label="新增死亡" align="center">
          </el-table-column>
          <!-- 新增治愈 -->
          <el-table-column prop="cure" label="新增治愈" align="center">
          </el-table-column>
          <!-- 境外输入 -->
          <el-table-column prop="outside" label="境外输入" align="center">
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 最新进展 -->
    <!-- 标题 -->
    <div class="nowTime">最新进展</div>
    <div class="lastedProgress">
      <!-- 新闻列表展示区 -->
      <div class="newsList">
        <!-- .native 调用原生的方法 -->
        <el-timeline>
          <el-timeline-item
            v-for="item in newsListData"
            :key="item.id"
            :timestamp="item.publishTime | fmtDate"
            placement="top"
            @click.native="toNewsDetail(item)"
          >
            <el-card>
              <h4>{{ item.title }}</h4>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
    <!-- 模态框 -->
    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <span>需要注意的是内容是默认不居中的</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      :title="newsTitle"
      :visible.sync="centerDialogVisible"
      width="60%"
      center
    >
      <!-- 展示内容的区域 -->
      <div v-html="newsContent"></div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="centerDialogVisible = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import { get } from "@/utils/request";
export default {
  data() {
    return {
      // 疫情动态数据的数组
      ncovData: [],
      // 国内疫情数据
      inLandCovidData: [],
      // 新闻列表数据
      newsListData: [],
      centerDialogVisible: false,
      // 弹出框标题
      newsTitle: "",
      newsContent: "",
    };
  },
  // 生命周期钩子函数
  created() {
    // 调用获取疫情动态数据的方法 页面加载的时候自动执行
    this.getNcovData();
    this.getInLandCovidData();
    // 自动执行
    this.getnewsListData();
  },
  methods: {
    // 获取疫情动态数据
    getNcovData() {
      // 发送网络请求
      axios({
        // 接口地址
        url: "http://api.tianapi.com/ncov/index?key=3e8e8e29357d55fe43dd3858800f8bc2",
      }).then((res) => {
        // console.log(res.data.newslist);
        // 赋值
        this.ncovData = res.data.newslist;
      });
    },
    // 国内疫情数据
    async getInLandCovidData() {
      let params = {
        page: 1,
        pageSize: 5,
      };
      let res = await get("/epidemic/pageQuery", params);
      // console.log(res.data.list);
      // 赋值
      this.inLandCovidData = res.data.list;
    },
    async getnewsListData() {
      // 设置参数
      let parmas = {
        page: 1,
        pageSize: 10,
      };
      // 发送请求
      let res = await get("/article/pageQuery", parmas);
      // console.log(res)
      // 数据的赋值
      this.newsListData = res.data.list;
    },
    toNewsDetail(item) {
      this.newsTitle = item.title;
      this.newsContent = item.content;
      // 弹出模态框
      this.centerDialogVisible = true;
    },
    /* 国内病例样式的设置函数 */
    changeColor(data){
      // console.log(data);
      if(data.rowIndex == 0){
        if(data.columnIndex ==0){
          return 'background-color: #e0e1fd; color: black;';
        }else if(data.columnIndex ==1){
          return 'background-color: #dd837f; color: black;';
        }else if(data.columnIndex ==2){
          return 'background-color: #f4d3aa; color: black;';
        }else if(data.columnIndex ==3){
          return 'background-color: #fdcccb; color: black;'; 
        }else if(data.columnIndex ==4){
          return 'background-color: #c5eab4; color: black;';
        }else if(data.columnIndex ==5){
          return 'background-color: #d2d2d2; color: black;';
        }
      }
    }
  },
};
</script>

<style scoped>
/* 当前时间的样式 */
.nowTime {
  color: #979797;
  margin: 5px;
}
/* 第一部分样式的设置 */
.first {
  /* flex流动布局 在父元素内设置  让所有的子元素在父元素上沿着主轴方向水平排列*/
  display: flex;
  /* 分配剩余空间 均匀分配*/
  justify-content: space-between;
}
/* 第一部分样式盒子的设置 */
.first .box,
.second .box {
  background-color: #ebf7fc;
  width: 33%;
  height: 120px;
  border-radius: 5px;
  text-align: center;
}
.first .box .num,
.second .box .num {
  /* 顶部外边距 */
  margin-top: 35px;
  font-weight: bold;
}
.first .box .title,.second .box .title {
  margin-top: 5px;
}
/* 第二部分的样式设置 */
.second {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.second .box {
  background-color: #f8f2ec;
  margin-bottom: 5px;
}
/* second部分的字体样式设置 */
.second .box .orange{
  color: #FF6738;
}
.second .box .green{
  color: #1FAEAE;
}
.second .box .red{
  color: #C03833;
}
.second .box .brown{
  color: #AF6C58;
}
.second .box .blue{
  color: #637DA3;
}

/* 最新进展的样式设置 */
.lastedProgress {
  margin-left: -30px;
}
</style>

